<template>
    <div v-loading="loading" class="addgroup">
        <goTem title="模型添加"></goTem>
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
            <el-form-item label="模型名称" prop="name">
                <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="模型表键名" prop="tablename">
                <el-input v-model="form.tablename"></el-input>
            </el-form-item>
            <el-form-item label="描述" prop="description">
                <el-input
                    type="textarea"
                    :rows="2"
                    placeholder="描述"
                    v-model="form.description">
                </el-input>
            </el-form-item>
            <el-form-item label="是否显示">
                <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
            </el-form-item>
            <el-form-item label="">
                <el-button style="width: 100px;" type="primary" @click="submitForm('form')">提交</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
export default {
    name: "add",
    data() {
        return {
            loading: true,
            rules: {
                name: [
                    {required: true, message: '请输入模型名称', trigger: 'blur'},
                ],
                tablename: [
                    {required: true, message: '请输入模型表键名', trigger: 'blur'}
                ],


            },
            form: {
                name: '文章表',
                tablename: "",
                description: '',
                status: true
            },
        }
    },
    mounted() {
        setTimeout(() => {
            this.loading = false
            this.initPageData()
        }, 200)
    },
    methods: {
        // 验证表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.Submit()
                } else {
                    this.$Msg.message("必填项不能为空", "error")
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        Submit() {

            let data = this.form

            let isEn = this.$common.StringUtility.isEnglish(data.tablename);

            if(isEn == false){
                this.$Msg.message("模型表键名只能为英文",'error');
                return;
            }

            this.$http.HttpPost("v1/AddModel", data).then((res) => {
                if (res.code == 0) {
                    this.$Msg.message(res.msg)
                    this.loading = false
                    setTimeout(() => {
                        this.resetForm("form");
                    }, 100)
                } else {
                    this.$Msg.message(res.msg, "error")
                }
            })
        },

        // 获取权限列表
        initPageData() {
            let data = {
                page: 1,
                num: 88888,
            }

            this.$http.HttpPost("v1/GetGrouplist", data).then((res) => {
                this.grouplist = res.data
            })
        }
    }
}
</script>

<style scoped>
.content {
    width: 600px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    height: 200px !important;
    overflow: scroll !important;

}

.contents {
    width: 200px !important;

    height: 200px !important;
    overflow: scroll !important;

}

.content p {
    width: 50%;
    padding-left: 3%;
    height: 30px;
    cursor: pointer;
    width: 30%;
    border: 1px solid transparent;
    font-size: 14px;
    align-items: center;
    display: flex;
    justify-content: left;
    text-align: center

}

.iconActive {
    border: 1px solid #ccc !important;
}
</style>
